const { defineConfig } = require("@vue/cli-service");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = defineConfig({
    publicPath: "/bs",
    transpileDependencies: true,
    //全局变量设置
    css: {
        /*
          cass-locader的版本不同，additionalData也会不同，
          sass-loader:v10以上就用：additionalData
          sass-loader:v8以上就用：prependData
          sass-loader:v8-以下就用：data
        */
        loaderOptions: {
            sass: {
                additionalData: `@import "@/assets/styles/variable.scss";`,
            },
        },
    },
    // Webpack 配置扩展
    configureWebpack: (config) => {
        /*
          代码混淆
          process.env.NODE_ENV 不需要自己设置
           当你运行 npm run serve 时，Vue CLI 会自动将 process.env.NODE_ENV 设置为 development
           当你运行 npm run build 时，Vue CLI 会自动将 process.env.NODE_ENV 设置为 production
         */
        if (process.env.NODE_ENV == "production") {
            // 为生产环境修改配置
            config.mode = "production";
            // 将每个依赖包打包成单独的js文件
            let optimization = {
                minimize: true,
                minimizer: [
                    new TerserPlugin({
                        terserOptions: {
                            warnings: false,
                            compress: {
                                drop_console: true,
                                drop_debugger: false,
                                pure_funcs: ["console.log"],
                            },
                        },
                    }),
                ],
            };
            Object.assign(config, {
                optimization,
            });
        } else {
            // 为开发环境修改配置
            config.mode = "development";
        }
    },
});
